<template>
	<div class="featurePD-child-box">
		<header>
			<div class="back" @click="featurePDChildBack" v-if="weixin"></div>
			<p>{{featureInfo.name}}</p>
			<div class="header-content" v-if="featureInfo.intro" v-html="featureInfo.intro">
				<!--{{$route.query.intro}}-->
			</div>
		</header>
		<div class="tabs">
			<ul>
				<li v-for="(v,index) of tabsParam" :class="{active:index == nowIndex}" @click="toggleTabs(index,v.type)">{{v.text}}</li>
			</ul>
		</div>
		<div class="connect">
			<ul class="h-great-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
				<li v-for="v in dataArray" @click="linklookBackVideo(v)">
			    	<img :src="v.bgimg+'?x-oss-process=image/resize,m_fixed,h_187,w_330'" v-on:click.self.prevent/>
			    	 <p>{{v.title}}</p>
			    </li>
			</ul>
			<p class="tip-text">{{tipText}}</p>
		</div>

	</div>
</template>

<script>
	import wxApi from "../util/wxApi";
	export default {
		mixins: [wxApi],
		data() {
			return {
				featureInfo:'',//特色频道页面信息
				nowIndex: 0,
				page: 0, //页码
				sel: '',
				weixin:window.terminal.weixin,
				dataArray: [],
				tipText: "",
				busy: false, //打开滚动
				tabsParam: [{
						text: '最新节目',
						type: '1'
					},
					{
						text: '最热节目',
						type: '2'
					},
				],
				shareInfoData: '', //分享信息
			}
		},
		created() {
			this.getFeatureInfoData()
			this.dotNum();
		},
		activated(){
           this.$store.dispatch('hideNav');
		},
		destroyed() {
		   //this.$store.dispatch('hideNav');
		},
		  computed: {
		    isLoadIcon() {
		      if(this.$store.state.SysOrgInfo.icon && this.featureInfo != ''){
		         this.wxRegister(this.wxRegCallback);
		         return true
		      }else{
		         return false
		      }
		    }
		  },
		  watch:{
		    isLoadIcon(val,oldVal){
		    }
		  },
		mounted() {
			this.$store.dispatch("hideNav");
		},
		methods: {
			dotNum() { //统计
				let _this = this;
				var argumentData = {
					sessionId: "featureId_"+_this.$route.query.id, //场次id
					streamType: 12, //视频类型：1-预告 2-直播 3-回看 10-全局统计 11-商品点击 12-页面
					actionValue: 1, //行为：1-进入 2-离开 3-点击播放 4-留言 5-点赞 6-关注 7-分享 8-开播 9-关播 10-最高峰值
					playSource: fun.getPlatform(), //微信 app
					url: window.location.href, //当前的url
				};
				_this.$http.post("/h5live/recordData", argumentData, {
						headers: {
							"Content-Type": "application/json"
						}
					})
					.then(
						res => {
							//console.log(res)
						},
						err => {
							console.log(err);
						}
					);
			},
			getFeatureInfoData(){
				//请求特色频道信息id     
				this.$http.get("/h5live/getTspdAlbum?zjId="+this.$route.query.id).then(
					res => {
						//console.log(res.data.data)
						if(res.data.code=='000000'){
                            this.featureInfo = res.data.data;
                            this.wxRegCallback()
						}else{
							console.log("接口报错")
						}
						
						}
					);
			},
			wxRegCallback() {
				let opstion = {
					link: window.location.href+'&wxShare=1',
					title: this.featureInfo.shareTitle || '【' + this.$store.state.SysOrgInfo.name + '】一起来看直播吧！', // 分享标题
					desc: this.featureInfo.shareDesc || "精彩直播，尽在" + this.$store.state.SysOrgInfo.name + "手机直播！", //分享描述
					imgUrl: this.featureInfo.imagurlShare || this.$store.state.SysOrgInfo.icon,
					success: function() {
						//alert("分享成功");
					},
					error: function(e) {
						//alert('分享失败:'+JSON.stringify(e))
					}
				};
				this.ShareTimeline(opstion);
			},
			loadMore: function() {
				this.busy = true;
				// 多次加载数据
				
				this.tipText = "数据加载中..."
				setTimeout(() => {
					this.page++;
					this.getArrayData();
				}, 500);

			},
			featurePDChildBack() {
				this.$router.push(`/${this.$channel}/featureHome`)
			},
			toggleTabs(index, type) {
				this.nowIndex = index;
				if(type == '1') {
					this.page = 1;
					this.sel = ''
					this.dataArray = []
					this.tipText = ''
					this.getArrayData()
				} else if(type == '2') {
					this.page = 1
					this.sel = 'pv'
					this.tipText = ''
					this.dataArray = []
					this.getArrayData()
				}
			},
			getArrayData(sel) { //请求数组
				let _this = this;
				//请求特色频道列表      
				_this.$http.get("h5live/getTspdVideoList?page=" + this.page + "&pageSize=10&typeid=" + this.$route.query.id + "&sel=" + _this.sel).then( //sel 空为最新 pv是热门
					res => {
						//console.log(res.data)
						if(res.data.code == '000000') {
							if(res.data.data.length) {
								_this.dataArray = _this.dataArray.concat(res.data.data)
								_this.busy = false;
								if(_this.dataArray.length < 10) {
									_this.busy = true; //禁用
									_this.tipText = ""
								}
							} else {
								_this.busy = true; //禁用
								_this.page = 0
								_this.tipText = "没有更多数据了"
							}
							//this.goods = this.goods.concat(res.data.result);

							// 第一次加载数据
							//_this.dataArray = res.data.data;
							// 当第一次加载数据完之后，把这个滚动到底部的函数触发打开
							//this.busy = false;

						} else {
							console.log("接口报错")
						}

					}
				);
			},
			linklookBackVideo(v) { //跳转回看视频
				//console.log(v)
				this.$router.push(`/${this.$channel}/lookBack_particulars/${v.vid}`);
			}
		}
	}
</script>

<style scoped="scoped">
	.tip-text {
		width: 100%;
		height: 80px;
		line-height: 80px;
		color: #999999;
		text-align: center;
		font-size: 26px;
		margin-bottom: 20px;
	}
	
	.featurePD-child-box {
		width: 100vw;
		height: 100vh;
		/*background: beige;*/
	}
	
	header {
		position: relative;
	}
	
	.back {
		width: 65px;
		height: 55px;
		background: url(../assets/images/iconsmall.png) no-repeat;
		background-size: 150px 150px;
		position: absolute;
		top: 20px;
		left: 40px;
	}
	
	header p {
		width: 100%;
		height: 80px;
		font-size: 36px;
		text-align: center;
		line-height: 80px;
		color: #333333;
	}
	
	.header-content {
		width: 100%;
		/*background: pink;*/
		padding: 20px 26px;
		text-align: justify;
		line-height: 36px;
		color: #666666;
		text-indent: 65px;
		font-size: 30px;
		box-shadow: 0px 15px 40px 0px rgba(0, 0, 0, 0.06);
		border-radius: 0px 0px 6px 6px;
	}
	
	.tabs ul {
		width: 100%;
		height: 80px;
		line-height: 80px;
		/*background: pink;*/
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 26px;
	}
	
	.tabs ul li {
		position: relative;
	}
	
	.active::after {
		content: '';
		width: 36px;
		height: 4px;
		position: absolute;
		top: 76px;
		left: 50%;
		transform: translateX(-50%);
		background: #FF0000;
	}
	
	.active {
		color: #FF0000;
	}
	.connect{
		width: 750px;
		height: calc(100vh - 276px);
		overflow: scroll;
	}
	.h-great-list {
	  display: flex;
	  display: -webkit-flex;
	  flex-wrap: wrap;
	  -webkit-flex-wrap: wrap;
	  width: 100%;
	  padding: 0 30px 20px;
	  font-size: 0;
}

.h-great-list li {
  width:330px;
  margin-top: 22px;
  box-sizing:border-box;
  -moz-box-sizing:border-box; /* Firefox */
  -webkit-box-sizing:border-box; /* Safari */
  background: rgba(255, 255, 255, 1);
}

.h-great-list li:nth-child(even) {
  margin-left: 30px;
}

.h-great-list li img {
  width: 100%;
  height: 187px;
  border-radius: 12px;
}
.h-great-list li p {
  width: 100%;
  margin-top: 10px;
  text-align: left;
  line-height: 40px;
 vertical-align: middle;
  font-size: 26px;
 text-align: justify;
  color: #333333;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
 
}

.h-great-list-info {
  padding: 0 10px;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-flex-align-items: center;
}

.h-great-list-info i {
  font-size: 42px;
}

.h-great-list-info span {
  color: #000;
  font-size: 26px;
   height: 42px;
  line-height: 38px;
}
</style>